
<template>
  <div class="staging-warp">
    <div class="index-top">
      <div class="inputBox">
        <div @click="show = true">{{ currentType }}</div>
        <i class="iconfont down">&#xe656;</i>
      </div>
      <van-popup v-model="show" position="bottom">
        <van-picker show-toolbar :default-index="defaultIndex" :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
      </van-popup>
    </div>
    <div class="container listInner">
      <div class="banner" />
      <ul class="menuList">
        <li v-for="(item, index) in currentList" :key="index" @click="toDetails(item.url)">
          <div v-if="item.message && item.message !== ''" class="message">{{ item.message }}</div>
          <div class="topIcon"><img :src="require(`@/assets/images/index/${item.icon}.png`)"></div>
          <b>{{ item.name }}</b>

        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      currentType: '安全生产',
      currentText: '安全生产',
      columnsList: [
        { label: '安全生产', text: '安全生产', name: '安全', code: 'safety' },
        { label: '环境保护', text: '环保管理', name: '环保', code: 'environmental' },
        { label: '消防安全', text: '消防管理', name: '消防', code: 'fireFighting' },
        { label: '能源管理', text: '能源管理', name: '能源', code: 'energySources' },
        { label: '碳排放管理', text: '碳排放管理', name: '碳排放', code: 'carbonDischarge' }
      ],
      columns: ['安全生产', '环境保护', '消防安全', '能源管理', '碳排放管理'],
      currentList: [],
      menuList: [
        {
          name: '安全生产',
          list: [
            { name: '综合统计', icon: 's_zh', url: '/staging/statistics' },
            { name: '企业信息', icon: 's_qy', url: '/staging/enterprise' },
            { name: '重点人员管理', icon: 's_aqr', url: '/staging/personnel' },
            // 禅道 6980 暂时隐藏，此次发版不看此功能
            { name: '安全智能综合评价', icon: 's_zhpj', url: '/staging/evaluate' },
            { name: '年度重点工作', icon: 's_ndgz', url: '/staging/AnnualWork' },
            { name: '安全生产投入', icon: 's_aqtr', url: '/staging/safeProduction' },
            { name: '风险管控', icon: 's_fxgk', url: '/staging/riskManagement' },
            { name: '隐患治理', icon: 's_yhzl', url: '/staging/dangerTreatment' },
            { name: '安全设施管理', icon: 's_sbss', url: '/staging/facility' },
            { name: '事故事件', icon: 's_sjsg', url: '/staging/AccidentEvents' },
            { name: '预警报警管理', icon: 's_ybyj', url: '/staging/AlarmManagement' }
          ]
        },
        {
          name: '环保管理',
          list: [
            { name: '综合统计', icon: 's_zh', url: '/staging/statistics' },
            { name: '企业信息', icon: 's_qy', url: '/staging/enterprise' },
            { name: '重点人员管理', icon: 's_hbr', url: '/staging/personnel' },
            // 禅道 6980 暂时隐藏，此次发版不看此功能
            { name: '环保智能综合评价', icon: 's_zhpj', url: '/staging/evaluate' },
            { name: '年度重点工作', icon: 's_ndgz', url: '/staging/AnnualWork' },
            { name: '环境保护业务管理', icon: 's_hbyw', url: '/staging/environBusiness' },
            // { name: '排污许可', icon: 's_tpfly', url: '/staging/pollutionDischarge' },
            { name: '环境风险点', icon: 's_fxgk', url: '/staging/pollutionSources' },
            { name: '隐患治理', icon: 's_yhzl', url: '/staging/dangerTreatment' },
            { name: '环保设施管理', icon: 's_sbss', url: '/staging/facility' },
            { name: '事故事件', icon: 's_sjsg', url: '/staging/AccidentEvents' },
            { name: '预警报警管理', icon: 's_ybyj', url: '/staging/AlarmManagement' }
          ]
        },
        {
          name: '消防管理',
          list: [
            { name: '综合统计', icon: 's_zh', url: '/staging/statistics' },
            { name: '企业信息', icon: 's_qy', url: '/staging/enterprise' },
            { name: '重点人员管理', icon: 's_xfr', url: '/staging/personnel' },
            // 禅道 6980 暂时隐藏，此次发版不看此功能
            { name: '消防智能综合评价', icon: 's_zhpj', url: '/staging/evaluate' },
            { name: '年度重点工作', icon: 's_ndgz', url: '/staging/AnnualWork' },
            { name: '消防生产投入', icon: 's_dftr', url: '/staging/productionInput' },
            { name: '消防重点部位', icon: 's_fxgk', url: '/staging/riskMonitoring' },
            // { name: '风险管控', icon: 's_fxgk', url: '/staging/riskMonitoring' },
            { name: '隐患治理', icon: 's_yhzl', url: '/staging/dangerTreatment' },
            { name: '消防设施管理', icon: 's_sbss', url: '/staging/facility' },
            { name: '事故事件', icon: 's_sjsg', url: '/staging/AccidentEvents' },
            { name: '预警报警管理', icon: 's_ybyj', url: '/staging/AlarmManagement' },
            { name: '房屋租赁消防安全', icon: 's_xfzl', url: '/staging/leaseOfHouses' }
          ]
        },
        {
          name: '能源管理',
          list: [
            { name: '综合统计', icon: 's_zh', url: '/staging/statistics' },
            { name: '企业信息', icon: 's_qy', url: '/staging/enterprise' },
            { name: '重点人员管理', icon: 's_nyr', url: '/staging/personnel' },
            { name: '集团能耗分析', icon: 's_hbyw', url: '/staging/energyConsumption' },
            // 禅道 6980 暂时隐藏，此次发版不看此功能
            { name: '能源智能综合评价', icon: 's_zhpj', url: '/staging/evaluate' },
            { name: '年度重点工作', icon: 's_ndgz', url: '/staging/AnnualWork' },
            { name: '节能诊断及评估', icon: 's_nyzd', url: '/staging/energySavingDiagnosis' },
            { name: '能源项目管理', icon: 's_nyzd', url: '/staging/energyProjectManagement' },
            { name: '重点设备管理', icon: 's_nyzssb', url: '/staging/keyEquipment' },
            { name: '隐患治理', icon: 's_yhzl', url: '/staging/dangerTreatment' },
            { name: '能源管理体系查询', icon: 's_nytx', url: '/staging/systemManage' },
            { name: '预警报警管理', icon: 's_ybyj', url: '/staging/AlarmManagement' } // PC端无此模块，暂时隐藏
          ]
        },
        {
          name: '碳排放管理',
          list: [
            { name: '综合统计', icon: 's_zh', url: '/staging/statistics' },
            { name: '碳排放数据管理', icon: 's_tpfr', url: '/staging/emissionData' },
            { name: '年度重点工作', icon: 's_ndgz', url: '/staging/AnnualWork' },
            { name: '碳配额履约管理', icon: 's_tpfly', url: '/staging/performance' },
            { name: '碳汇项目管理', icon: 's_tpfth', url: '/staging/carbonSink' }
            // { name: '一般降碳项目管理', icon: 's_tpfjt', url: '/staging/projectManage' }
          ]
        }
      ],
      defaultIndex: 0
    }
  },
  created() {
    const rights = sessionStorage.getItem('rights')
    this.columns = this.columnsList.filter(x => {
      return rights.includes(x.code)
    }).map(z => {
      return z.label
    })
    this.currentType = this.columns[0]
    const { current } = this.$route.query
    if (current) {
      this.currentText = current
      this.currentType = this.columnsList.find(v => { return v.text === current }).label
      this.defaultIndex = this.columns.findIndex(val => val === this.currentType)
    }
    this.changeMenu()
  },
  methods: {
    changeMenu() {
      console.log('changeMenu', this.currentText)
      this.currentList = this.menuList.find((v) => {
        return v.name === this.currentText
      }).list
    },
    toDetails(path) {
      console.log(this.currentText)
      this.$router.push({ path: path, query: { current: this.currentText }})
    },
    onConfirm(value, index) {
      this.currentType = value
      this.currentText = this.columnsList[index].text
      this.show = false
      this.changeMenu()
    },
    onCancel() {
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.staging-warp {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .index-top {
    height: 90px;
    flex: 0 0 90px;
    margin-bottom: 0;
    background: #3f81ff;
    .inputBox {
      display: flex;
      align-items: center;
      justify-content: center;
      .iconfont {
        font-size: 32px;
        margin-left: 10px;
      }
    }
  }
  .container {
    flex: 1;
    padding: 20px;
    background: #ffffff;
    overflow-y: auto;
    .banner {
      width: 100%;
      height: 200px;
      background: url('~@/assets/images/index/company.png') no-repeat;
      background-size: 100% 100%;
      border-radius: 20px;
      opacity: 0.99;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      .inner {
        width: 440px;
        height: 80px;
        background-image: linear-gradient(90deg, #4f9eff 1%, #0327cb 100%), linear-gradient(#ffffff, #ffffff);
        background-blend-mode: normal, normal;
        border-radius: 6px 6px 0px 0px;
        border: solid 1px #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 0 23px;
        color: #ffb81e;
        font-weight: bold;
        font-size: 30px;
        border-bottom-width: 0;
        i {
          font-size: 40px;
        }
        b {
          margin-left: 15px;
        }
        span {
          margin-left: auto;
        }
      }
    }
    .menuList {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 99%;
      margin: 30px auto 0;
      li {
        position: relative;
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        .message {
          width: 29px;
          height: 29px;
          background-color: #eb0000;
          border-radius: 100%;
          position: absolute;
          right: 50px;
          top: 20px;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .topIcon {
          width: 140px;
          height: 140px;
          background-color: #f3f5f7;
          border-radius: 65px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 15px;
          img {
            width: 80px;
            height: auto;
          }
        }
        b {
          font-family: PingFang-SC-Bold;
          font-size: 28px;
          line-height: 33px;
          letter-spacing: 0px;
          color: #1a2e3f;
          margin-bottom: 10px;
          font-weight: bold;
        }
        span {
          font-size: 14px;
          line-height: 22px;
          letter-spacing: 0px;
          color: #72818d;
          i {
            margin-left: 8px;
          }
        }
      }
    }
  }
}
</style>
